<template>
  <div class="personal-editing">
      <!-- 个人中心 - 编辑 姓名 性别 -->
    <div class="deposit-content">
        <div class="top-bg">
            <div class="header">
                    <div class="left" @click="diffBack" ><img src="@/assets/img/public/leftarrow.png" alt=""></div>
                    <div class="title">{{title}}</div>
                    <div class="right" @click="submitEdit">完成</div>
                </div>
        </div>
        <!-- <div class="top-bg">
            <van-nav-bar class="header" fixed :border="false" @click-left="diffBack" @click-right="submitEdit">
                <div class="left"
                    slot="left">
                    <van-icon name="arrow-left"
                            size="24px"
                            color="#fff" />
                </div>
                <div class="title"
                    slot="title">{{title}}</div>
                <div class="right-title"
                    slot="right">完成</div>
            </van-nav-bar>
        </div> -->
        <div  class="reset-wrapper">
            <div class="loginWrap">
                <div class="loginForm">
                    <div class="loginPhone bgwrite" v-if="tages=='isName'">
                        <input :placeholder="placeHolderC"
                                class="phoneInput"
                                maxlength="20"
                                v-model="inputValue"
                                ref="inputName"
                                @click="focusName"/>
                        <img v-if="inputValue" class="pwd-right" src="@/assets/img/login/cancelBtn.png" alt="" @click="nameClear">
                    </div>
                    <div class="loginPhone bgwrite" v-if="tages=='isSex'">
                            <input :placeholder="placeHolderC"
                                    class="phoneInput"
                                    v-model="inputValue"
                                    @click="editSex"
                                    readonly
                                    />
                            <van-popup v-model="showPopY" position="bottom" :overlay="true">  
                                <van-picker
                                    show-toolbar
                                    title="编辑性别"
                                    :columns="listSex"
                                    @cancel="cancelSex"
                                    @confirm="confirmSex"
                                    />
                        </van-popup>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import {
  removeRole,
  removeToken,
  removeuserUid,
  getRole,
  getuserUid,
  getUserInfo,
  setUserInfo
} from "@/utils/auth.js";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      title: "",
      inputValue: "",
      sex: "",
      tages: "",
      info: "",
      placeHolderC: "",
      txtnum: 20,
      showPopY: false,
      listSex: ['男', '女'],
    };
  },
  created() {
      const self = this
      self.tages  = self.$route.params.tages
      self.info  = self.$route.params.info
      if (self.tages == "isName"){
          self.title = "姓名"
          if (self.info) {
              self.inputValue = self.info
          } else {
              self.placeHolderC = "请输入姓名"
          }
      } else if (self.tages == "isSex"){
          self.title = "性别"
          if(self.info) {
              self.inputValue = self.info
          } else {
              self.placeHolderC = "请选择性别"
          }
      }
  },
  watch:{
      inputValue(newval,oldval){
          const self = this 
          if(!newval){
              if (self.tages == "isName"){
                  self.placeHolderC = "请输入姓名"
              } else if (self.tages == "isSex") {
                  self.placeHolderC = "请选择性别"
              }
          } else {
              (self.inputValue.length <= 20) ||
              ((self.inputValue = self.inputValue.slice(0, 20)));
          }
      }
  },
  methods: {
    // 聚焦姓名
    focusName() {
        this.$refs.inputName.focus()
    },
    // 删除姓名
    nameClear() {
        this.inputValue = ""
    },
    diffBack () {
        this.$router.push('/designer/myPersonality')
    },
    submitEdit() {
        const self = this
        if (self.tages == "isName") {
            if (!self.inputValue  || /^\s*$/.test(self.inputValue)) {
                self.$toast('姓名不能为空哦')
                self.inputValue = ""
            } else if (self.inputValue){
               self.editUserInfoName()
            }
        } else if (self.tages == "isSex") {
            if (!self.inputValue) {
                self.$toast('性别不能为空哦')
            } else if (self.inputValue){
                self.editUserInfoSex()
            }
        }
        
    },
    // 编辑性别
    editSex() {
        this.showPopY = true 
    },
    // 删除编辑性别
    cancelSex() {
        this.showPopY = false 
    },
    // 确认编辑性别
    confirmSex(val) {
        this.inputValue = val
        this.showPopY = false
    },
    // 姓名修改
    async editUserInfoName() {
      let formdata = new FormData();
      formdata.append("uid", getuserUid());
      formdata.append("userName", this.inputValue);
      formdata.append("sex", getUserInfo().sex);
      formdata.append("updateBy", getuserUid());
      const modifyper = await HTTP("editUserInfo", formdata);
      if (modifyper.code === 200) {
          this.$toast('姓名修改成功')
          this.getUserMsgCenter()
          window.setTimeout(() => {
                if (getRole() == 2){
                    this.$router.push('/performance/myPersonality')
                } else if (getRole() == 3){
                    this.$router.push('/performance/myPersonality')
                } else {
                    this.$router.push('/designer/myPersonality')
                }
          }, 800)
        //    if (getRole() == 2){
        //         this.$router.push('/performance/myPersonality')
        //     } else if (getRole() == 3){
        //         this.$router.push('/performance/myPersonality')
        //     } else {
        //         this.$router.push('/designer/myPersonality')
        //     }
      }  else if(modifyper.code === 1001) {
         this.$toast(modifyper.msg)
         this.inputValue = "" 
      } else {
         this.$toast(modifyper.msg|| '服务器异常') 
      }
    },
    // 性别修改
    async editUserInfoSex() {
      let formdata = new FormData();
      formdata.append("uid", getuserUid());
      formdata.append("userName", getUserInfo().userName);
      formdata.append("sex", this.inputValue);
      formdata.append("updateBy", getuserUid());
      const modifyper = await HTTP("editUserInfo", formdata);
      if (modifyper.code === 200) {
          this.getUserMsgCenter()
          this.$toast('性别修改成功')
          window.setTimeout(() => {
                if (getRole() == 2){
                    this.$router.push('/performance/myPersonality')
                } else if (getRole() == 3){
                    this.$router.push('/performance/myPersonality')
                } else {
                    this.$router.push('/designer/myPersonality')
                }
            }, 800)
      } else {
         this.$toast(modifyper.msg|| '服务器异常') 
      }
    },
    // 获取个人中心首页数据
    async getUserMsgCenter() {
      const res = await HTTP("userCenter", {
        userUid: getuserUid()
      });
      if (res.code == 200) {
          setUserInfo(res.data)
      } else {
        this.$toast(res.msg|| '服务器异常')
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.personal-editing {
    height: 100vh;
  .top-bg{
        width: 100%;
        background: #fff;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        .header {
            background: #5E8EFE;
            color: #ffffff;
            height: 0.92rem;
            line-height: 0.92rem;
            box-sizing: border-box;
            padding: 0 3%;
            display: flex;
            div{
                display: inline-block;
                vertical-align: top;
            }
            .left{
                width: auto;
                margin-top: 0.15rem;
                img{
                    width: 0.40rem;
                    height: 0.40rem;
                }
            }
            .title {
                color: #ffffff;
                font-size: 0.35rem;
                text-align: center;
                flex: 1;
                }
            .right{
                font-size: 0.32rem;
                height: 0.92rem;
                line-height: 0.92rem;
                width: auto;
            }
        }
    }
  .reset-wrapper{
      width: 100%;
      padding: 0.24rem;
      box-sizing: border-box;
    margin-top: 0.92rem;
      
  .loginWrap {
    width: 90%;
    margin: 0 auto;
    .LoginFont {
      width: 100%;
      font-size: 0.26rem;
      font-weight: 500;
      margin-top: 0.4rem;
    }
    .loginForm {
      width: 100%;
      .loginPhone {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        .phoneIcon {
          width: 0.3rem;
        }
        .phoneInput {
          width: 5rem;
          border: 0;
          margin: 0.3rem 0.2rem;
          font-size: 0.3rem;
        }
        .pwd-right{
          width: 0.3rem;
          margin: auto;
        }
      }
      // 密码
      .loginPassword {
        position: relative;
        width: 100%;
        height: 1rem;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        border: 1px solid #E5E5E5;
        border-radius: 0.1rem;
        padding: 0 0.24rem;
        margin-top: 0.24rem;
        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          width: 130%;
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.9rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1E8FFF!important;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
      }
      .contract-forget{
        position: relative;
        width: 100%;
        margin-top: 0.5rem;
        div{
          display: inline-block;
        }
        .contract-left{
          .contract-word{
            display: inline-block;
            color: #5E8EFE;
            font-size: 0.28rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
          }
        }
        .forget-right{
          position: absolute;
          top: 0;
          right: 0;
          height: 0.2rem;
          text-align: right;
          input{
            background: transparent;
            border: 0;
            color: #959595;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 0.28rem;
          }
        }
      }
      .loginPhoCode {
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        margin-top: 0.2rem;

        .phoCodeIcon {
          width: 0.3rem;
        }
        .phoCodeInput {
          border: 0;
          margin-left: 0.2rem;
          font-size: 0.3rem;
        }
        .getphoCode {
          width: 1.6rem;
          height: 0.4rem;
          background-color: transparent;
          border: 1px solid #1E8FFF!important;
          color: #1E8FFF;
          border: 0;
          margin-left: auto;
          border-radius:0.04rem;
          font-size: 0.22rem;
          line-height: 0.4rem;
        }
        .getphoCodeR {
          width: 1rem;
          height: 0.4rem;
          background-color: #a4a09c;
          border: 0;
          margin-left: auto;
          border-radius: 0.04rem;
          font-size: 0.22rem;
        }
      }

      .loginBtn {
        margin-top: 0.5rem;
        width: 100%;
        height: 0.9rem;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.1rem;
        font-size: 0.3rem;
        background: #5E8EFE;
      }
      .go-register{
        margin-top: 0.5rem;
        width: 100%;
        height: 0.32rem;
        text-align: center;
        line-height: 0.32rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #656565;
      }
      .temp-btns{
        margin-top: 0.5rem;
        button{
          width: 40%;
          margin: 0 30%;
        }
      }
    }
  }
  }
  .portraitGroup {
    border-radius: 0.1rem;
    margin-bottom: 0.24rem;
    .weui-cells .vux-no-group-title {
      margin-top: 0px;
    }
  }
  .portraitGroupB {
    border-radius: 0.1rem;
    margin-bottom: 0.5rem;
    .weui-cells .vux-no-group-title {
      margin-top: 0px;
    }
  }
  .cell {
    height: 1rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #3f3e3e;
    font-size: 0.3rem;
  }
  .cellImg{
    height: 1.68rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #3f3e3e;
    font-size: 0.3rem;
    img {
      border-radius: 50%;
      width: 1.28rem;
      height:1.28rem;
    } 
  }
  .exitBtn {
    height: 0.88rem;
    width: 100%;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: #fff;
    font-size: 0.26rem;
    text-align: center;
    line-height: 0.88rem;
    margin: 0 auto;
    background: #5E8EFE;
    border-radius: 0.1rem;
  }
}
</style>
